<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}<el-button @click="ww">nj</el-button></div>
    <el-calendar v-model="value">
<!--      //showCalendar ：控制日历置灰-->
      <!-- <template > -->
      <div
        slot="dateCell"
        slot-scope="{ data }"
        @click="allcalendar(data)"
        class="temp"
      >
<!--        //is-selected-1:为自定义的类名-->
        <div :class="data.isSelected ? 'is-selected-1' : ''">
          {{ data.day.split("-").slice(2).join("-") }}
          <br/>
          <p class="smallp">
            {{ wJson[data.day] ? wJson[data.day]['high'] : '' }}
            <br/>
            {{ wJson[data.day] ? wJson[data.day]['low'] : '' }}
          </p>
        </div>
      </div>
    </el-calendar>
    <el-input v-model="fileName"></el-input>
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :show-file-list="false"
        :on-change="handleChange2"
        :on-success="handleAvatarSuccess2"
        :auto-upload="false"
      >
        <!--              :before-upload="beforeAvatarUpload2"-->
        <img v-if="picUrl" :src="picUrl" class="avatar" width="140" height="140" >
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dayWeather } from '@/api/tool/weather'
import axios from 'axios'
import { getToken } from '@/utils/auth'

export default {
  name: 'Dashboard',
  data() {
    return {
      value: new Date(),
      wList: [{ day: '2022-02-17', fl: 1, high: '7', low: '0' },
        { day: '2022-02-19', fl: 2, high: '4c', low: '-1' },
        { day: '2022-02-20', fl: 3, high: '5', low: '1' }],
      wJson: {
        '2022-02-17': { fl: 1, high: '7c', low: '0c' },
        '2022-02-18': { fl: 2, high: '4c', low: '-1c' },
        '2022-02-19': { fl: 3, high: '5c', low: '1c' }
      },
      imageUrl2: '', // 图片路径2
      imageFile: '', // 图片文件
      uploadUrl: `${this.$baseUrl}/school/api/upload/fileUpload`, // 上传路径
      picUrl: '',
      fileName: ''
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
  // 日历触发事件
    allcalendar(data) {
      const loading = this.$loading({
        // lock: true,  //加上这个 页面点击日历的时候会莫名其妙抖动一下 因为我界面上有滚动条，所以我注释了
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        console.log('dddddddd', data.day)
        // this.calendar.productDate = data.day // 取到你需要的日期data.day
        // 需要用到这日期做啥事，比如做为调接口的参数
        loading.close()
      }, 500)
    },
    ww() {
      const that = this
      const param = { cityName: '南京' }
      dayWeather(param).then(res => {
        console.log('ppppp', param)
        console.log('rrrrrr', res)
        debugger
        if (res.code === 20000) {
          that.wJson = {}
          res.data.forEach(item => {
            that.wJson[item.theDate] = item
          })
        }
      })
    },

    handleAvatarSuccess2(res, file) {
      this.form.pic = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 20

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 20MB!')
      }
      return isJPG && isLt2M
    },
    // 文件上传的钩子 上传成功后保存的数组
    handleChange2(file) {
      const _file = file.raw
      const windowURL = window.URL || window.webkitURL
      this.imageUrl = windowURL.createObjectURL(_file)
      this.imageFile = new FormData()
      this.imageFile.append('file', _file, _file.name)
      this.imageFile.append('modular', '后台')
      this.imageFile.append('fileName', this.fileName)
      this.imageFile.append('usedFileUrl', null)
      const _this = this
      debugger
      console.log(',,,222=' + _this.uploadUrl)
      async function upload() {
        console.log(',,,333=' + _this.config)
        _this.config = { headers: {}}
        // _this.config.headers['X-Token'] = getToken()
        _this.config.headers['Authorization'] = getToken()
        await axios.post(_this.uploadUrl, _this.imageFile, _this.config).then(function(req) {
          if (req.data.code === 200) { // 这个200是数值还是？
            _this.imageUrl2 = req.data.data
            _this.form.pic = req.data.data
          }
        })
      }
      upload()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.smallp{
  font-size: 10px;
}
</style>
